<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"     
      xmlns:ui="http://java.sun.com/jsf/facelets"       
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
        <title>Grocery store</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <h:outputStylesheet library="css" name="index.css"  />
        <h:outputStylesheet library="css" name="product.css"  />
        <h:outputScript library="javax.faces" name="jsf.js" target="head" />
    </h:head>
<h:body>
        
        <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                        
                    </button>
                    <a class="navbar-brand" href="#"></a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><h:link value="" outcome="HomeP">Home</h:link></li>
                        <li><a href="#"></a></li>
                    </ul>
                    <h:form class="empty" id="navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><h:link value=""><span class="glyphicon glyphicon-user"></span> Your Account</h:link></li>
                        <li>
                            <h:link outcome="AdminP" rendered="#{user.admin}"><span class="glyphicon glyphicon-asterisk"></span> 
                                Admin Panel
                            </h:link>
                        </li>
                        <li>
                            <h:link outcome="OrdersP"><span class="glyphicon glyphicon-envelope"></span> 
                                Orders
                            </h:link>
                        </li>
                        <li>

                            <h:link outcome="CartP"><span class="glyphicon glyphicon-shopping-cart"></span> 
                                Cart - 
                                <h:panelGroup id="cartgtotal" >
                                <span  style="font-weight: bold;font-family: Segoe UI Semibold;font-size: 16px;">
                                    <h:outputText value="£#{cart.totalCostOfCart}"/>
                                </span>
                                </h:panelGroup>   
                            </h:link>
                             
                        </li>
                        <li><h:commandLink  action="#{user.logout}" ><span class="glyphicon glyphicon-log-out"></span> Log Out</h:commandLink ></li>
                    </ul>
                    </h:form>
                </div>
            </div>
        </nav>
    
    
        <div id="content">
             <ui:insert name="content"></ui:insert>
        </div>
    
        <br></br>
        <hr width="60%" class="botton-line" ></hr>
        <footer class="footer ">
            <div class="container">
                <p class="text-muted"><small>Staffordshire University - Grocery store - HaydnG &copy;</small></p>
            </div>
        </footer>
    
</h:body>
</html>
